<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片瀑布流</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#list{
				position: relative;
				list-style: none;
			}
			#list img{
				position:absolute;
				transition:  all 0.5s;
			
			}
		</style>
	</head>
	<body>
		<div id="list">
		</div>
	</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var WIDTH=300;
var imgArray=[];//主要用来放置加载好的图片
	//先给图片做预加载
	function preLoadImg(){
		for(var i=1;i<40;i++){
			var aImg=$("<img>").attr("src","img/Rendering/"+i+".jpg");
			aImg.on("load",function(){
				imgArray.push(this);
				if(imgArray.length==39){
					//加载完毕
					creatLi();
					window.onresize=function(){
					creatLi();
					}	
				}
			});
		}
	}
preLoadImg();

	//创建瀑布流
	function creatLi(){
		//计算可以放置多少列
var numCol=parseInt(document.documentElement.clientWidth/(WIDTH+10));
//var sub=document.documentElement.clientWidth-numCol*(WIDTH+10);
//if(sub>WIDTH/2){	
//}
var topArray=[];
//初始化记录高度值的数组
for(var i=0;i<numCol;i++){
	topArray[i]=0;
}
		for(var i=0;i<39;i++){
			var aImg=imgArray[i];
			aImg.style.width=WIDTH+"px";
//--------------------找到找到放到那一列，高度最小列
			var minIndex=0;
			var min=topArray[0];
			for(var j=0;j<topArray.length;j++){
				if(min>topArray[j]){
					min=topArray[j];
					minIndex=j;
				}
			}
			aImg.style.left=minIndex*(WIDTH+10)+10+"px";
			aImg.style.top=min+10+"px";
			$("#list").append($(aImg));
			topArray[minIndex]+=(aImg.offsetHeight+10);
		}
	}

	
</script>